﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
    <link href="../../css/admin_login.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/element-ui/lib/theme-chalk/index.css" rel="stylesheet" type="text/css" />
    <script src="../../Content/vue-2.6.11/dist/vue.min.js" type="text/javascript"></script>
    <script src="../../Content/element-ui/lib/index.js" type="text/javascript"></script>
    <script src="../../Content/axios/dist/axios.min.js" type="text/javascript"></script>
  
</head>
<body>

     <div class="login">
        <table width="100%" height="450" border="0" cellpadding="0" cellspacing="0">
            <tr>

                <td width="49%" height="312" align="center" valign="bottom">
                    <br />
                    <table width="375" border="0" cellspacing="0" cellpadding="0" style="margin-bottom:140px;">
                        <tr>
                            <td colspan="2" align="center">
                                 <h1 style="color: #3666aa;font-size: 35px;">网站管理中心</h1>
                            </td>
                        </tr>
                        <tr style="display: none;">
                            <td width="240" height="25" align="right" style="padding-right: 10px; color: #666">
                            </td>
                            <td width="135">
                                <div class="newsadd_title">
                                    <ul>
                                        <li id="uboxstyle"></li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
                <td width="51%" valign="bottom" >
                    <div id="app" style="margin-bottom:60px;">
                    <el-form ref="form" :model="form" :rules="rules" size="mini" label-width="80px" style="width:300px;margin-left:20px;">
                     <el-form-item label="用户名" prop="loginname">
                              <el-input v-model="form.loginname"  placeholder="请输入用户名"></el-input>
                     </el-form-item>
                     <el-form-item label="密码" prop="password">
                              <el-input v-model="form.password"  placeholder="请输入密码" show-password></el-input>
                     </el-form-item>
                      <el-form-item label="验证码" prop="yzm">
                              <el-input style="width:50%" v-model="form.yzm"   placeholder="输入验证码"></el-input> <img id="ImageCheck"   style="margin-left: 10px;position: relative;left: 0px;top: 10px;" v-on:click="ChangeCode()" src="/ValidateCode.aspx" tooltip="验证码" />
                     </el-form-item>
                     <el-form-item>
                         <el-button type="primary" style="width:170px"  v-on:click="onSubmit('form')">登陆</el-button>
                    </el-form-item>
                    </el-form>
                    </div>
                </td>
            </tr>
        </table>

</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                form: {
                    loginname: '',
                    password: '',
                    yzm: ''
                },
                rules: {
                  loginname: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                       ],
                  password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                       ],
                  yzm: [
                       { required: true, message: '请输入验证码', trigger: 'blur' }
                       ]
                 } 
                 } 
        },
		methods : 
        {
            onSubmit(formName){
                var that = this;
                this.$refs[formName].validate((valid) => 
                {
                    if(valid){
                        axios.post('/Manager/checkLogin',that.transformRequest(that.form)).then(function(response){
                            
							let result = JSON.parse(response.data);
                            if(result.success){
								that.$message({
                                    message : result.msg,
									type : 'success',
                                    duration : '500',
                                    onClose : function(){
                                        window.location.href = "/Manager/index";
                                    }
                                });
                               
                            }
                            else{
                               that.$message.error(result.msg);
                            }
                            
                        }).catch(function(error){
                            console.log(error);
                        });
                        
                        
                    }
                    else{
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
			transformRequest(data){
                let params = '';
                for(let index in data){
                    params += index + '=' + data[index] + '&';
                }
                return params;
            },
            
            ChangeCode(){
                var myImg = document.getElementById("ImageCheck");
                myImg.src = "/ValidateCode.aspx?flag=" + Math.random();
                return false;
            }
        }
    })
  </script>
 
</html>
